<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>添加和移除事件</title>
	<script>
        window.onload = function () {
            const oP = document.getElementById('content');
            oP.addEventListener('click', changeColor, false);
            const oBtn = document.getElementById('btn');
            oBtn.addEventListener('click', function () {
                oP.removeEventListener('click', changeColor, false);
            }, false);

            function changeColor() {
                this.style.color = 'hotpink';
            }

            const oBtn2 = document.getElementById('btn2');
            oBtn2.onclick = function (e) {
                alert(e.type);
            }
            const oBtn3 = document.getElementById('btn3');
            oBtn3.onclick = function (){
                window.open('https://www.baidu.com');
			}
            const oBtn4 = document.getElementById('btn4');
            oBtn4.onclick = function (){
                var opener = window.open();
                opener.document.write('这是一个新窗口');
            }
        }
	</script>
</head>
<body>
<p id="content">
	点击我改变颜色
</p>
<input id="btn" type="button" value="点击我解除">
<br>
<input id="btn2" type="button" value="点击查看事件类型">
<br>
<input id="btn3" type="button" value="打开百度">
<br>
<input id="btn4" type="button" value="打开新窗口">
<br>
<input id="btn5" type="button" value="关闭新窗口">
</body>
</html>